<!-- BEGIN: Subheader -->
<div class="m-subheader">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title m-subheader__title--separator">
				Typography
			</h3>
			<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
				<li class="m-nav__item m-nav__item--home">
					<a href="#" class="m-nav__link m-nav__link--icon">
						<i class="m-nav__link-icon la la-home"></i>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Base
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Typography
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first m--hide">
										<span class="m-nav__section-text">
											Quick Actions
										</span>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="row">
		<div class="col-md-6">
			<!--begin::Portlet-->
			<div class="m-portlet m-portlet--tab">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<span class="m-portlet__head-icon m--hide">
								<i class="la la-gear"></i>
							</span>
							<h3 class="m-portlet__head-text">
								Heading
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<h3 class="m-section__heading">
							Default headings
						</h3>
						<span class="m-section__sub">
							All HTML headings,
							<code>
							&lt;h1&gt;
						</code>
						through
						<code>
						&lt;h6&gt;
					</code>
					, are available.
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<div class="row">
								<div class="col-md-6">
									<h1>
										h1. Heading 1
									</h1>
									<div class="m--space-10"></div>
									<h2>
										h2. Heading 2
									</h2>
									<div class="m--space-10"></div>
									<h3>
										h3. Heading 3
									</h3>
									<div class="m--space-10"></div>
									<h4>
										h4. Heading 4
									</h4>
									<div class="m--space-10"></div>
									<h5>
										h5. Heading 5
									</h5>
									<div class="m--space-10"></div>
									<h6>
										h6. Heading 6
									</h6>
								</div>
								<div class="col-md-6">
									<h1 class="m--font-success">
										h1. Heading 1
									</h1>
									<div class="m--space-10"></div>
									<h2 class="m--font-info">
										h2. Heading 2
									</h2>
									<div class="m--space-10"></div>
									<h3 class="m--font-warning">
										h3. Heading 3
									</h3>
									<div class="m--space-10"></div>
									<h4 class="m--font-danger">
										h4. Heading 4
									</h4>
									<div class="m--space-10"></div>
									<h5 class="m--font-primary">
										h5. Heading 5
									</h5>
									<div class="m--space-10"></div>
									<h6 class="m--font-brand">
										h6. Heading 6
									</h6>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Customizing headings
				</h3>
				<span class="m-section__sub">
					Use the included utility classes to recreate the small secondary heading text.
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<h3>
								Fancy display heading
								<small class="text-muted">
									With faded secondary text
								</small>
							</h3>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Display headings
				</h3>
				<span class="m-section__sub">
					Larger, slightly more opinionated heading styles.
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<h3 class="display-1">
								Display 1
							</h3>
							<h3 class="display-2">
								Display 2
							</h3>
							<h3 class="display-3">
								Display 3
							</h3>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Lead
				</h3>
				<span class="m-section__sub">
					Make a paragraph stand out by adding
					<code>
					.lead
				</code>
				.
			</span>
			<div class="m-section__content">
				<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
					<div class="m-demo__preview">
						<p class="lead">
							Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
						</p>
					</div>
				</div>
			</div>
		</div>
		<!--end::Section-->
	</div>
</div>
<!--end::Portlet-->  		<!--begin::Portlet-->
<div class="m-portlet m-portlet--tab">
	<div class="m-portlet__head">
		<div class="m-portlet__head-caption">
			<div class="m-portlet__head-title">
				<span class="m-portlet__head-icon m--hide">
					<i class="la la-gear"></i>
				</span>
				<h3 class="m-portlet__head-text">
					General
				</h3>
			</div>
		</div>
	</div>
	<div class="m-portlet__body">
		<!--begin::Section-->
		<div class="m-section">
			<h3 class="m-section__heading">
				Inline text elements
			</h3>
			<span class="m-section__sub">
				Styling for common inline HTML5 elements.
			</span>
			<div class="m-section__content">
				<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
					<div class="m-demo__preview">
						<p>
							You can use the mark tag to
							<mark>
								highlight
							</mark>
							text.
						</p>
						<p>
							<del>
								This line of text is meant to be treated as deleted text.
							</del>
						</p>
						<p>
							<s>
								This line of text is meant to be treated as no longer accurate.
							</s>
						</p>
						<p>
							<ins>
								This line of text is meant to be treated as an addition to the document.
							</ins>
						</p>
						<p>
							<u>
								This line of text will render as underlined
							</u>
						</p>
						<p>
							<small>
								This line of text is meant to be treated as fine print.
							</small>
						</p>
						<p>
							<strong>
								This line rendered as bold text.
							</strong>
						</p>
						<p>
							<em>
								This line rendered as italicized text.
							</em>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!--end::Section-->  				<!--begin::Section-->
		<div class="m-section">
			<h3 class="m-section__heading">
				Abbreviations
			</h3>
			<span class="m-section__sub">
				Stylized implementation of HTML’s
				<code>
				&lt;abbr&gt;
			</code>
			element.
		</span>
		<div class="m-section__content">
			<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
				<div class="m-demo__preview">
					<p>
						<abbr title="attribute">
							attr
						</abbr>
					</p>
					<p>
						<abbr title="HyperText Markup Language" class="initialism">
							HTML
						</abbr>
					</p>
				</div>
			</div>
		</div>
	</div>
	<!--end::Section-->  				<!--begin::Section-->
	<div class="m-section">
		<h3 class="m-section__heading">
			Blockquotes
		</h3>
		<span class="m-section__sub">
			Quoting blocks of content.
		</span>
		<div class="m-section__content">
			<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
				<div class="m-demo__preview">
					<blockquote class="blockquote">
						<p class="mb-0">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
						</p>
						<footer class="blockquote-footer">
							Someone famous in
							<cite title="Source Title">
								Source Title
							</cite>
						</footer>
					</blockquote>
					<blockquote class="blockquote blockquote-reverse">
						<p class="mb-0">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
						</p>
						<footer class="blockquote-footer">
							Someone famous in
							<cite title="Source Title">
								Source Title
							</cite>
						</footer>
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<!--end::Section-->
</div>
</div>
<!--end::Portlet-->
</div>
<div class="col-md-6">
	<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Text
					</h3>
				</div>
			</div>
		</div>
		<div class="m-portlet__body">
			<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Basic text
				</h3>
				<span class="m-section__sub">
					Basic text examples
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<p>
								<span >
									Example text
								</span>
							</p>
							<p>
								<span class="m--font-bold">
									Example bold text
								</span>
							</p>
							<p>
								<span class="m--font-bolder">
									Example bolder text
								</span>
							</p>
							<p>
								<span class="m--font-boldest">
									Example boldest text
								</span>
							</p>
							<p>
								<span class="m--font-transform-u">
									Example uppercase text
								</span>
							</p>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					State colors
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<p>
								<span class="m--font-success">
									Success state text
								</span>
							</p>
							<p>
								<span class="m--font-warning">
									Warning state text
								</span>
							</p>
							<p>
								<span class="m--font-info">
									Info state text
								</span>
							</p>
							<p>
								<span class="m--font-danger">
									Danger state text
								</span>
							</p>
							<p>
								<span class="m--font-primary">
									Primary state text
								</span>
							</p>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->
		</div>
	</div>
	<!--end::Portlet-->  		<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Links
					</h3>
				</div>
			</div>
		</div>
		<div class="m-portlet__body">
			<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Basic Links
				</h3>
				<span class="m-section__sub">
					Basic link examples
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<p>
								<a href="#" class="m-link">
									Example link
								</a>
							</p>
							<p>
								<a href="#" class="m-link m--font-bold">
									Example bold link
								</a>
							</p>
							<p>
								<a href="#" class="m-link m--font-bolder">
									Example bolder link
								</a>
							</p>
							<p>
								<a href="#" class="m-link m--font-boldest">
									Example boldest link
								</a>
							</p>
							<p>
								<a href="#" class="m-link m--font-transform-u">
									Example uppercase link
								</a>
							</p>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					State colors
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<p>
								<a href="#" class="m-link m-link--state m-link--success">
									Success state
								</a>
							</p>
							<p>
								<a href="#" class="m-link m-link--state m-link--warning">
									Warning state
								</a>
							</p>
							<p>
								<a href="#" class="m-link m-link--state m-link--info">
									Info state
								</a>
							</p>
							<p>
								<a href="#" class="m-link m-link--state m-link--danger">
									Danger state
								</a>
							</p>
							<p>
								<a href="#" class="m-link m-link--state m-link--primary">
									Primary state
								</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->
		</div>
	</div>
	<!--end::Portlet-->  		<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Badges
					</h3>
				</div>
			</div>
		</div>
		<div class="m-portlet__body">
			<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Basic Badges
				</h3>
				<span class="m-section__sub">
					Basic state color badges
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview m-demo__preview--badge">
							<span class="m-badge m-badge--brand">
								3
							</span>
							<span class="m-badge m-badge--metal">
								4
							</span>
							<span class="m-badge m-badge--primary">
								7
							</span>
							<span class="m-badge m-badge--success">
								8
							</span>
							<span class="m-badge m-badge--info">
								11
							</span>
							<span class="m-badge m-badge--warning">
								2
							</span>
							<span class="m-badge m-badge--danger">
								5
							</span>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Dot Badges
				</h3>
				<span class="m-section__sub">
					State color dot badges
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<span class="m-badge m-badge--brand m-badge--dot"></span>
							<span class="m-badge m-badge--metal m-badge--dot"></span>
							<span class="m-badge m-badge--primary m-badge--dot"></span>
							<span class="m-badge m-badge--success m-badge--dot"></span>
							<span class="m-badge m-badge--info m-badge--dot"></span>
							<span class="m-badge m-badge--warning m-badge--dot"></span>
							<span class="m-badge m-badge--danger m-badge--dot"></span>
							<div class="m--space-20"></div>
							Pending
							<span class="m-badge m-badge--brand m-badge--dot"></span>
							Caption
							<span class="m-badge m-badge--primary m-badge--dot"></span>
							Heading
							<span class="m-badge m-badge--info m-badge--dot"></span>
							Status
							<span class="m-badge m-badge--danger m-badge--dot"></span>
							<div class="m--space-20"></div>
							Pending
							<span class="m-badge m-badge--brand m-badge--dot m-badge--dot-small"></span>
							Caption
							<span class="m-badge m-badge--primary m-badge--dot m-badge--dot-small"></span>
							Heading
							<span class="m-badge m-badge--info m-badge--dot m-badge--dot-small"></span>
							Status
							<span class="m-badge m-badge--danger m-badge--dot m-badge--dot-small"></span>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Wide Badges
				</h3>
				<span class="m-section__sub">
					Wide badges for longer text
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview m-demo__preview--badge">
							<span class="m-badge m-badge--brand m-badge--wide">
								new
							</span>
							<span class="m-badge m-badge--metal m-badge--wide">
								pending
							</span>
							<span class="m-badge m-badge--primary m-badge--wide">
								203
							</span>
							<span class="m-badge m-badge--success m-badge--wide">
								hot
							</span>
							<span class="m-badge m-badge--info m-badge--wide">
								fixed
							</span>
							<span class="m-badge m-badge--warning m-badge--wide">
								in process
							</span>
							<span class="m-badge m-badge--danger m-badge--wide">
								completed
							</span>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->  				<!--begin::Section-->
			<div class="m-section">
				<h3 class="m-section__heading">
					Rounded Badges
				</h3>
				<span class="m-section__sub">
					Rounded badges examples
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview m-demo__preview--badge">
							<span class="m-badge m-badge--brand m-badge--wide m-badge--rounded">
								new
							</span>
							<span class="m-badge m-badge--metal m-badge--wide m-badge--rounded">
								pending
							</span>
							<span class="m-badge m-badge--primary m-badge--wide m-badge--rounded">
								203
							</span>
							<span class="m-badge m-badge--success m-badge--wide m-badge--rounded">
								hot
							</span>
							<span class="m-badge m-badge--info m-badge--wide m-badge--rounded">
								fixed
							</span>
							<span class="m-badge m-badge--warning m-badge--wide m-badge--rounded">
								in process
							</span>
							<span class="m-badge m-badge--danger m-badge--wide m-badge--rounded">
								completed
							</span>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->
		</div>
	</div>
	<!--end::Portlet-->
</div>
</div>
</div>
